<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>元素操作</h1>
		<h2>获取元素节点（DOM对象）之后，操作属性的两种方法</h2>
		<ul>
			<li>直接使用属性名：只能操作HTML标准属性，且只能设置和获取值，无法删除属性。</li>
			<li>
				<h3>使用attribute系列方法(可以操作所有属性)</h3>
				<ul>
					<li>setAttribute(name,value)：设置属性值</li>
					<li>getAttribute(name)：获取属性值</li>
					<li>removeAttribute(name)：移除属性</li>
				</ul>
			</li>
		</ul>
		<img id="img1" class="img1-class1 img1-class2" name="img1-name" title="img1-class" fengxian="fx">
		
	</body>
	<script>
		// let div = document.getElementById("img1");
		let img1 = document.querySelector("#img1");
		 
		// console.log(Object.getPrototypeOf(img1));
		// console.log(HTMLImageElement.prototype);
		// console.log(img1 instanceof HTMLImageElement);

		
		img1.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11839788312%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651974102&t=47b9fc66e3408b0777c0b291ab70ebc9";
		console.log(img1.fengxian); // undefined：非标准属性
		console.log(img1.name); // img1-name：标准属性

		console.log(img1.className);  // class属性使用className来操作（不推荐用来修改，仅推荐用于获取值）

		img1.setAttribute("dmj","杜明均");
		let v = img1.getAttribute("class"); // class属性又要用回class
		console.log("class = ",v);

		img1.removeAttribute("fengxian");

		// 获取所有属性数组
		let atts = img1.attributes;
		for (var i in atts) {
			console.log(i, " = ",atts[i]);
		}
	</script>
</html>
